<template>
  <el-menu class="el-menu-demo" mode="horizontal" background-color="#fff" text-color="#334157" active-text-color="#334157">
    <img class="showimg" :src="collapsed?imgsh:imgst" @click="toggle(collapsed)">
    <el-submenu index="2" class="submenu">
      <template slot="title" class="el-submenu__title">超级管理员</template>
      <el-menu-item @click="content()" index="2-2">个人中心</el-menu-item>
      <el-menu-item @click="exit()" index="2-3">退出</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
  import SetupPassword from '../views/setup/SetupPassword'
  export default {
    name: 'NavMenu',
    components: {SetupPassword},
    data () {
      return {
        collapsed: true,
        imgst: require('../../assets/img/show.png'),
        imgsh: require('../../assets/img/sq.png'),
      }
    },

    methods: {
      // 退出登录
      exit () {
        this.$confirm('退出登录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(() => {
            setTimeout(() => {
              this.$store.commit('login', 'false')
              this.$router.push({ path: '/login' })
              this.$message({
                type: 'success',
                message: '已退出登录!'
              })
            }, 1000)
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消'
            })
          })
      },
      // 切换显示
      toggle(showtype) {
        this.collapsed = !showtype
        this.$root.Bus.$emit('toggle', this.collapsed)
      },
       // 设置修改密码
       setupPasswordDialog: function () {
              this.$router.push({ path: '/setup/SetupPassword' })
       },
       // 个人中心
       content () {
           this.$router.push({ path: '/user/center' })
       }
    }
  }
</script>

<style scoped>
  /*a{*/
  /*  text-decoration: none;*/
  /*}*/

  /*span {*/
  /*  pointer-events: none;*/
  /*}*/
  /deep/ .el-submenu__title {
    height: 50px !important;
    line-height: 50px !important;
    border: none !important;
    color: #909399;
  }
  .el-menu-demo{
    width: 100%;
    height: 50px;
  }
  .submenu {
    height: 50px;
    line-height: 50px;
    float: right;
  }
  el-menu-item{
    height: 50px;
    line-height: 50px;
  }
  .showimg {
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 15px;
    left: 17px;
  }
</style>
